<template>
  <div>
     <!-- 查看详情弹框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="roleAssignmentShow"
      width="670px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
    <!-- <p class="shopList"></p> -->
      <div class="sousuojg6_10" v-loading="listLoading">
        <el-transfer
          filterable
          :titles = "titles"
          :filter-method="filterMethod"
          :props=teacherListTransferProps
          filter-placeholder="请输入名称"
          v-model="value"
          @change="change"
          :data="data">
        </el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloses">取 消</el-button>
        <el-button type="primary" @click="addRoleByMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import bus from '../../assets/js/bus'
import https from '../../plugins/https'
import qs from 'qs'
export default {
  props: {
    roleAssignmentShow: {
      type: Boolean,
      default() {
        return false
      }
    },
    roleAssignmentType: {
      type: Number
    },
    roleAssignmentId:{
      type: Number
    }
  },
  data(){
    const generateData = _ => {
      const data = [];
      const cities = [];
      const pinyin = [];
      cities.forEach((city, index) => {
        data.push({
          name: city,
          // key: index,
          id: pinyin[index]
        });
      });
      return data;
    };
    return{
      data: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.name.indexOf(query) > -1;
      },
      teacherListTransferProps: {
        key: 'id',
        label: 'name'
      },
      formInline: {
        // oemUid: localStorage.getItem('jurisdiction') == 0 ? localStorage.getItem('uid') : '',
        officeUid: localStorage.getItem('uid'),
        activeUid: '',
        page: 1,
        number: 20
      },
      value: [],
      totalNum: 0, //总页数
      tableData: [],
      listLoading: false,
      titles: [],
      menu: []
    }
  },
  watch : {
    roleAssignmentShow (n) {
      if (n === true) {
        this.titles = (this.roleAssignmentType == 1 ? ['未分配权限', '已分配权限'] : ['未分配角色', '已分配角色'])
        console.log(444, this.titles)
        this.titles[0] == '未分配权限' ? this.queryProductInfo() : this.queryRoleDistributor()
      }
    }
  },
  mounted () {
    console.log( this.value)
  },
  methods:{
    nav(){
       axios
      .post("/api/sys/menu/nav", {})
      .then(res => {
        // console.log("数据是")
        console.log(res.data.permission);
        var btnGroup = res.data.permission;
        btnGroup = JSON.stringify(btnGroup);
        sessionStorage.setItem("btnGroup", btnGroup);
        // var timer = new data
      })
      .catch(err => {
        // alert("数据是")
        console.log(err);
      });
    },
    roleDistributor () {
      if (this.menu.length > 1) {
        layer.open({
            content: '只能分配一个角色',
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false
      }
      let pl = {
        userId: this.roleAssignmentId,
        roleId: this.menu
      }
      this.listLoading = true
      https.roleDistributor(pl).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return false
        }
        bus.$emit("roleAssignmentSuccess", {type:1,show:false})
        layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
      })
    },
    addRoleByMenu () {
      if (this.menu.length == 0) {
      layer.open({
            content: '请分配权限',
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          return false}
      // this.$notify({title: "错误",message: ,type: "error"});
      if (this.roleAssignmentType == 2) {
        this.roleDistributor()
        return false
      }
      let pl = {
        id: this.roleAssignmentId,
        menu: this.menu
      }
      this.listLoading = true
     

      https.addRoleByMenu(pl).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return false
        }else{
          
        this.nav()
        bus.$emit("roleAssignmentSuccess", {type:1,show:false})
       
        layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
        }
        
      })
    },
    change (data,type) {
      console.log(11111, data,type)
      this.menu = data
    },
    queryRoleDistributor () {
      console.log(222222)
      this.listLoading = true
      let pl = {
        id: this.roleAssignmentId,
        officeUid: localStorage.getItem('uid'),
      }
      https.queryRoleDistributor(pl).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return false
        }
        this.value = []
        this.data = []
        let newData = []

        for (let i = 0; i < res.data.data.distributorRoles.length; i++) {
          newData.push(res.data.data.distributorRoles[i])
        }
        for (let j = 0; j < res.data.data.notDistributorRoles.length; j++) {
          console.log("下马是大方的")
          newData.push(res.data.data.notDistributorRoles[j])
        
        }
        this.data = newData

        for (let j = 0; j < res.data.data.distributorRoles.length; j++) {
          this.value.push(res.data.data.distributorRoles[j].id)
          this.menu.push(res.data.data.distributorRoles[j].id)
          console.log("下面是打印的")
        }
        this.listLoading = false
      })
    },
    queryProductInfo () {
      this.value = []
        this.data = []
      this.listLoading = true
      let pl = {
        id: this.roleAssignmentId,
        officeUid: localStorage.getItem('uid'),
      }
      https.queryRoleByMenu(pl).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return false
        }
        
        let newData = []

        for (let i = 0; i < res.data.data.distributorRoles.length; i++) {
          newData.push(res.data.data.distributorRoles[i])
        }
        for (let j = 0; j < res.data.data.distributorNotRoles.length; j++) {
          newData.push(res.data.data.distributorNotRoles[j])
        }
        this.data = newData
        for (let j = 0; j < res.data.data.distributorRoles.length; j++) {
          this.value.push(res.data.data.distributorRoles[j].id)
        }
        this.listLoading = false
      })
    },
    handleCloses(done) {
      this.value=[]
      bus.$emit("roleAssignmentSuccess", {type:2,show:false})
    }
  }
}
</script>
<style scoped>
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
 .sousuojg6_10 {
   width: 100%;
  height: 350px;
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-bottom: 30px;
}
/deep/ .el-transfer-panel__filter{
  margin-left: 0px !important
}
/deep/ .el-transfer-panel{
  width: 220px !important;
}
/deep/ .el-transfer-panel__filter .el-input__inner{
  margin-left: 8px !important;
}
</style>
